import { observer } from './observer';

(function(doc) {
  console.log(123);
  var oUsername  = doc.querySelector('#username');
  var oAge       = doc.querySelector('#age');
  var oEmail     = doc.querySelector('#email');
  var oTel       = doc.querySelector('#tel');
  var oSubmitBtn = doc.getElementById('submitBtn');
  var oInfoTable = doc.getElementById('infoTable');

  var userInfo = observer({
    username: '',
    age: '',
    email: '',
    tel: ''
  }, oInfoTable)

  console.log(userInfo);

  var init = function() {

    bindEvent();
  }

  function bindEvent() {
    oSubmitBtn.addEventListener('click', handleSubmitBtnClick, false);
  }

  function handleSubmitBtnClick() {
    var _username = oUsername.value.trim();
    var _age      = oAge.value.trim();
    var _email    = oEmail.value.trim();
    var _Tel      = oTel.value.trim();

    _username && (_username !== userInfo.username) && (userInfo.username = _username);
    _age      && (_age !== userInfo.age)           && (userInfo.age = _age);
    _email    && (_email !== userInfo.email)       && (userInfo.email = _email);
    _Tel      && (_Tel !== userInfo.tel)           && (userInfo.tel = _Tel);

    oUsername.value = '';
    oAge.value      = '';
    oEmail.value    = '';
    oTel.value      = '';
  }

  init();
})(document);

